<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="assets/images/icloud_logo_sm.png" type="image/png" />
    <link
      href="https://cdn.staticfile.org/bootstrap/5.1.3/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.staticfile.org/animate.css/4.1.1/animate.min.css"
      rel="stylesheet"
    />
    <link href="assets/css/univ.css" rel="stylesheet" />

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/spin.js/1.2.7/spin.min.js"></script>
    <link
      href="https://cdn.staticfile.org/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css"
      rel="stylesheet"
    />
    <title>Wellcome to Canary</title>
    <style>
      .all_footer-end {
        background: rgba(255, 255, 255, 0.3);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
      }

      .all_footer-end * {
        color: rgb(29, 29, 27);
      }

      .container-fluid * {
        transition: all 500ms ease-out;
      }

      .blank-block {
        height: 10vh;
        width: 100%;
      }

      .major-block {
        height: 90vh;
        width: 100%;
      }

      .rt-15 {
        border-radius: 15px 15px 0 0;
      }

      .rb-15 {
        border-radius: 0 0 15px 15px;
      }
      .need-blur2 {
        background: rgba(255, 255, 255, 0.3);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
      }
    </style>
  </head>

  <body>
    <!-- load animation -->
    <div
      id="loader_div"
      style="
        position: absolute;
        justify-content: center;
        align-items: center;
        display: flex;
        width: 100%;
        height: 100%;
      "
    ></div>
    <script>
      var spinner = new Spinner({ lines: 10 });
      function trigger_loader() {
        var target = $("#loader_div").get(0);
        spinner.spin(target);
      }
      function hide_loader() {
        spinner.spin();
        $("#loader_div").hide();
        $("#home_view").css("filter", "");
      }
      trigger_loader();
      $(window).load(function () {
        hide_loader();
      });
    </script>

    <!--wrapper-->
    <div
      class="container-fluid px-0"
      id="home_view"
      style="
        transition: filter 0.6s;
        filter: blur(47.2px) brightness(90%);
        min-height: 100vh;
      "
    >
      <!--start header -->
      <!--end header -->
      <div
        class="shadow-lg d-flex flex-cloumn align-items-center text-dark ps-5 pe-3 need-blur"
        style="height: 90vh"
      >
        <div class="w-100 px-2">
          <div class="row justify-content-center">
            <img
              class="col-sm-4 col-md-4 col-lg-3 col-xl-3 mb-5"
              src="https://www.svgrepo.com/show/123757/bird.svg"
              alt="bird icon"
            />
          </div>
          <div class="d-flex w-100 justify-content-between">
            <h1 id="hello_words" class="display-1 text-truncate- py-3">
              Big Love, Big Life
            </h1>
          </div>
          <h5 class="text-truncate- pb-1">
            Canary brings phenomenal convinces
          </h5>

          <a
            class="mt-3 btn btn-outline-primary rounded-pill"
            href="/regist.html"
            >Register Now</a
          >
        </div>
      </div>

      <div class="blank-block"></div>
	<div class="mx-3 gx-3 row justify-content-around d-none d-lg-flex">
        <div
          class="col-sm-12 col-md-12 col-lg-6 col-xl-6 r-15 px-3 py-3 mx- need-blur shadow-lg"
        >
          <h3 class="display-5 text-center">Get Start</h3>
          <hr />
          <div class="row mx-0">
            <div class="col card r-15 px-0 py-0 border-0">
              <img
                class="px-5 rt-15 py-5 border"
                src="https://www.svgrepo.com/show/2755/container.svg"
                class="card-img-bottom"
                alt="..."
              />
              <div class="card-body bg-primary text-white border-0 py-3 px-2">
                <h5 class="card-title">Get Your Devices</h5>
                <p class="card-text text-truncate-">
                  Use a ESP8266 to start programing, or start with a ESP12F/E,
                  Node MCU etc.
                </p>
              </div>
              <div
                class="card-footer border-0 bg-primary text-center"
                style="border-radius: 0 0 15px 15px"
              >
                <a
                  href="https://docs.ai-thinker.com/en/welcome"
                  class="text-white text-center"
                  >Buy it now</a
                >
              </div>
            </div>

            <div class="col card mx-3 r-15 px-0 py-0 border-0">
              <img
                class="px-5 rt-15 py-5 border"
                src="https://www.svgrepo.com/show/353783/github-octocat.svg"
                class="card-img-bottom"
                alt="..."
              />
              <div class="card-body bg-primary text-white border-0 py-3 px-2">
                <h5 class="card-title">Clone the Project</h5>
                <p class="card-text text-truncate-">
                  Clone the project publish in github or gitee, start building
                  then. The project is named JC-IO.
                </p>
              </div>
              <div
                class="card-footer border-0 bg-primary text-center"
                style="border-radius: 0 0 15px 15px"
              >
                <a
                  href="https://gitee.com/eglwang/jc-io"
                  class="text-white text-center"
                  >Go Gitee</a
                >
              </div>
            </div>

            <div class="col card r-15 px-0 py-0 border-0">
              <img
                class="p-3 rt-15 border"
                src="https://thumbs.dreamstime.com/b/canary-color-icon-songbird-isolated-vector-illustration-197458783.jpg"
                class="card-img-bottom"
                alt="..."
              />
              <div class="card-body bg-primary text-white border-0 py-3 px-2">
                <h5 class="card-title">Join Canary</h5>
                <p class="card-text text-truncate-">
                  Join Canary, which provide you a intergal platform to make use
                  of your devices. Good luck.
                </p>
              </div>
              <div
                class="card-footer border-0 bg-primary text-center text-white"
                style="border-radius: 0 0 15px 15px"
              >
                <a
                  href="https://www.glwang.site/"
                  class="text-white text-center"
                  >Sign In</a
                ><b>/</b
                ><a
                  href="https://www.glwang.site/account/regist/"
                  class="text-white text-center"
                  >Sign Up</a
                >
              </div>
            </div>
          </div>
        </div>

        <div class="blank-block d-lg-none"></div>

        <div
          class="col-sm-12 col-md-12 col-lg-5 col-xl-5 r-15 px-3 py-3 mx- need-blur shadow-lg"
        >
          <h3 class="display-5 text-center">Applications</h3>
          <hr />
          <div class="row mx-0">
            <div class="col-12 card r-15 px-0 py-0 border-0">
              <img
                class="mx-0 my-0 r-15"
                src="https://img.alicdn.com/tfs/TB1CsqNU.Y1gK0jSZFMXXaWcVXa-1440-568.jpg"
                class="card-img"
                alt="..."
              />
              <div class="card-img-overlay border-0 px-0 py-0">
                <div class="py-3 px-2 w-100 text-dark need-blur rt-15">
                  <h5 class="card-title">Agricultures</h5>
                  <p class="card-text text-truncate-">
                    Canary helps to monitor fields environment, and improves
                    production efficiency
                  </p>
                </div>
              </div>
            </div>
            <div class="col-12 mt-3 card r-15 px-0 py-0 border-0">
              <img
                class="mx-0 my-0 r-15"
                src="https://img.alicdn.com/tfs/TB1fRwsfxvbeK8jSZPfXXariXXa-1440-568.jpg"
                class="card-img"
                alt="..."
              />
              <div class="card-img-overlay border-0 px-0 py-0">
                <div class="py-3 px-2 w-100 text-dark need-blur rt-15">
                  <h5 class="card-title">Smart Home</h5>
                  <p class="card-text text-truncate-">
                    Easy to monitor your home condition remotely, like
                    temperature, humanity, lightness etc. with Canary.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="" style="width: 100%; height: 5vh"></div>
      </div>
    </div>

    <div class="blank-block"></div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>
    <script src="assets/js/regl.min.js"></script>
    <script src="assets/js/draw_back.js"></script>

    <!-- <script>
		$(document).ready(
			function () {
				$("html").niceScroll();
			}
		);
	</script> -->
    <!--app JS-->
    <!-- <script src="assets/js/app_news.js"></script> -->
  </body>
  <footer class="text-center text-lg-start text-muted fixed-bottom need-blur2">
    <!-- Copyright -->
    <div class="text-center p-4">
      <!-- <a class="text-reset" href="/"><small>Console</small></a> | -->
      <!-- <a class="text-reset" href="/home.html"><small>Home</small></a> | -->
      <a class="text-reset" data-bs-toggle="modal" data-bs-target="#tr_mod"
        ><small>Terms & Conditions</small></a
      >
      |
      <a class="text-reset" data-bs-toggle="modal" data-bs-target="#sp_mod"
        ><small>Become a Sponsor</small></a
      >
    </div>
    <!-- Copyright -->
  </footer>

  <!-- Vertically centered scrollable modal -->
  <div
    class="modal fade o0"
    id="tr_mod"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
    tabindex="-1"
    aria-labelledby="staticBackdropLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog o0 modal-dialog-centered modal-dialog-scrollable">
      <div
        class="modal-content r-15"
        style="
          background: rgba(255, 255, 255, 0.7);
          backdrop-filter: blur(20px) saturate(180%);
          -webkit-backdrop-filter: saturate(180%) blur(20px);
        "
      >
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">
            Terms & Conditions
          </h5>
          <!-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
        </div>
        <div id="tr_body" class="modal-body">
          <p>
            &nbsp;&nbsp;We strongly recommend you to read "Terms&Conditions"
            carefuly before you start using our services.
          </p>
          <p>
            1.The email as your account ID, we won't share your email with
            anyone, and the email will be only way to alter your account
            settings. By checking this option(Newsletter), you consent to us
            sending you advertising emails through this email address.
          </p>
          <p>
            2.Your infomation like name will be store on cloud so we can provide
            a better server for you,we do not provide this information to any
            third-party.
          </p>
          <p>
            3.We promise not to harm your interests, but we are not responsible
            for the consequences of malicious or improper use of our System
            either by you or others.
          </p>
          <p>
            4.You are not permitted to use the System for any commercial
            activities.
          </p>
          <p>
            5.The final interpretation of these Terms shall be vested in us.
          </p>

          <p>
            6.By registering for the System, you agree to all the above terms.
          </p>
          <hr />
          <p>
            &nbsp;&nbsp;在使用本系统所提供的服务前，我们强烈建议阁下详细阅读以下条款。
          </p>
          <p>
            1.阁下所填写的电子邮件将做为你的系统账号使用，其是更改你的账户设置的唯一认证方式，我们不会向第三方泄露你的电子邮件。
            通过勾选新闻选项表示你同意我们向你所填写的邮箱发送广告性质的邮件。
          </p>
          <p>
            2.为了向阁下提供更好的服务，你的个人信息如姓名将保存在云服务器，我们不会向第三方提供你的消息。
          </p>
          <p>
            3.我们保证不会损害阁下的权益，但如果由于你或他人对系统的恶意或不当使用所造成的后果，我们将不承担主要责任。
          </p>
          <p>4.你不被允许将本系统用于商业活动。</p>
          <p>5.我们保留对上述条款的最终解释权。</p>
          <p>6.在本系统注册账户即表明你同意以上所有条款</p>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-outline-primary border-0"
            data-bs-dismiss="modal"
          >
            Understood
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Vertically centered scrollable modal -->
  <div
    class="modal fade o0"
    id="sp_mod"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
    tabindex="-1"
    aria-labelledby="staticBackdropLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog o0 modal-dialog-centered modal-dialog-scrollable">
      <div
        class="modal-content r-15"
        style="
          background: rgba(255, 255, 255, 0.7);
          backdrop-filter: blur(20px) saturate(180%);
          -webkit-backdrop-filter: saturate(180%) blur(20px);
        "
      >
        <div class="modal-header">
          <h5 class="modal-title" id="staticBackdropLabel">
            <i class="bi bi-chat-dots-fill" style="color: #0008"></i>
            Buy us a coffee
          </h5>
        </div>
        <div class="modal-body">
          <div class="d-flex flex-column align-items-center">
            <img
              src="./assets/images/money.jpg"
              class="img-fluid r-15 shadow-lg mb-4"
            />
            <p>
              &nbsp;&nbsp;If you like our System and want to become a sponsor,
              you can contact us by Wechat with the QR code above.
            </p>
            <p>
              &nbsp;&nbsp;如果你对我们的系统感兴趣，可以通过以上方式联系我们。我们接收捐赠。
            </p>
          </div>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-outline-primary border-0"
            data-bs-dismiss="modal"
          >
            Yes
          </button>
        </div>
      </div>
    </div>
  </div>
</html>
